<template>
	<z-paging ref="paging" bgColor="transparent" class="content" refresher-only v-model="dataList" @query="queryList">
		<template #top>
			<my-navbar
				:bgUrl="`${$imgurl}/static/order-bg.jpg`"
				:title="'送别人订单'"
				title-color="#fff"
				leftIconColor="#fff"
				:scrollTop="scrollTop"
				:autoBack="true"
			/>
		</template>
		<view class="box title-box" v-if="data!=''">
			<view class="tit">
				<view class="h1">
					{{data.subject_title}}
				</view>
				<view class="status" :class="{
					on:data.crack_status==1||data.crack_status==2,
					off:data.crack_status==3
				}"  >
					{{data.crack_status_text}}
				</view>
			</view>
			
			<view class="time">
				结束倒计时：
				<!-- v-if="data._end_time-Date.now()/1000>0"  -->
				<up-count-down
						v-if="time>0"
						:time="time"
						format="HH:mm:ss"
						autoStart
						millisecond
						@change="onChange"
						>
					<view class="times">
						<view class="custom">
							{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}
						</view>
						<view class="custom">
							{{ timeData.minutes }}
						</view>
						<view class="custom">
							{{ timeData.seconds }}
						</view>
					</view>
				</up-count-down>
				<view v-else style="color:#838A99">已结束</view>
			</view>
			<view class="values">
				<view class="item">
					<view class="val">
						{{data.join_num}}
					</view>
					<view class="msg">
						参与人数
					</view>
				</view>
				<view class="item">
					<view class="val">
						{{data.join_crack_num}}
					</view>
					<view class="msg">
						已破解人数
					</view>
				</view>
			</view>
		</view>
		
		<view class="box goods-box" v-if="data!=''">
			<view class="title">
				商品详情
				<!-- <view class="a">
					查看明细 <up-icon color="#9BA2AB" size="28rpx" name="arrow-right"></up-icon>
				</view> -->
			</view>
			<my-good-info :data="data" />
		</view>
		<view class="box user-box">
			<view class="tab">
				<image :src="`${$imgurl}/static/cy-bg.png`" :class="{on:userType==1}" mode=""></image>
				<view class="it" :class="{on:userType==0}" @click="onTab(0)">
					破解用户
				</view>
				<view class="it" :class="{on:userType==1}" @click="onTab(1)">
					参与用户
				</view>
			</view>
			<my-user-list :list="dataList">
				<template #btn="{ item }">
					<block v-if="item.status">
						<view class="user-btn" v-if="item.check_status==0" @click="onExamine(item)">
							确认
						</view>
						<view class="user-btn" v-else-if="item.check_status==1">
							已确认
						</view>
						<view class="user-btn" v-else-if="item.check_status==2">
							已驳回
						</view>
					</block>
					<view class="user-btn" v-else>
						未破解
					</view>
					
				</template>
				
			</my-user-list>
		</view>
		<view class="box it-box">
			<view class="it">
				<view class="msg">订单信息</view>
			</view>
			<view class="it">
				<view class="msg">ID编号</view>
				<view class="val">
					{{data.id}}
				</view>
			</view>
			<view class="it">
				<view class="msg">发起时间</view>
				<view class="val">
					{{$u.timeFormat(data.add_time, 'yyyy年mm月dd日 hh:MM:ss')}}
				</view>
			</view>
		
		</view>
		<button open-type="contact" class="box btn-box">
			<image :src="`${$imgurl}/static/icon-kf2.png`" mode=""></image> 联系客服
		</button>
	</z-paging>
	
		
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onPageScroll} from "@dcloudio/uni-app"
	import {orderForOtherInfoApi,joinGiftUserListApi,orderForOtherLogGiftCheckApi} from "@/api/gift.js"
	const scrollTop=ref(0)
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	// 使用 reactive 创建响应式对象  
	const timeData = ref({});  
	const userType=ref(0)
	const data=ref('')
	const id=ref('')
	const time=ref(0)
	// 定义 onChange 方法  
	const onChange = (e) => { 
	  timeData.value = e;  
	};  
	onLoad(async (obj)=>{
		id.value=obj.id
		const res=await orderForOtherInfoApi({id:obj.id})
		data.value=res.data
		time.value=(res.data._end_time-Date.now()/1000)*1000
		paging.value.reload()
	})
	const dataList=ref([])
	const paging=ref(null)
	const onTab=(e)=>{
		userType.value=e
		paging.value.reload()
	}
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		let res=await joinGiftUserListApi({
			id:id.value,
			page:pageNo,
			limit:pageSize,
			status:userType.value==0?1:0
		})
		paging.value.complete(res.data.list);
	}
	const onExamine=(e)=>{
		uni.showActionSheet({
			itemList: ['通过', '驳回'],
			success: async (res)=>{
				// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				let re=await orderForOtherLogGiftCheckApi({
					id:e.id,
					check_status:res.tapIndex==0?1:2
				})
				paging.value.reload()
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
		position: relative;
		
	}
	.user-btn{
		width: 144rpx;
		line-height: 56rpx;
		background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color:#fff;
	}
	.content{
		::v-deep{
			// .zp-view-super{
			// 	background-color: #F5F6FA;
			// }
		}
	}
	.title-box{
		margin-top:20rpx;
		padding:28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.values{
			margin-top:24rpx;
			background-color: #F7F8FA;
			border-radius: 8rpx;
			display: flex;
			padding: 30rpx 0;
			.item{
				flex: 1;
				text-align: center;
				line-height: 1;
				
				.val{
					font-size:36rpx;color:#242529;
					font-weight: bold;
				}
				.msg{
					color:#878787;
					font-size:26rpx;margin-top:16rpx;
				}
				&:nth-child(2){
					border-left:1rpx solid #DADADA;
					.val{
						color:#FF4A40;
					}
				}
			}
		}
		.tit{
			display: flex;
			.h1{
				font-weight: bold;
				flex:1;
				width: 600px;
				font-size: 32rpx;
			}
			.status{
				margin-left:20rpx;
				padding:0 16rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 48rpx;
				background-color: #FFF2F0;
				color:#FF4A40;
				&.on{
					background-color: #EFF5FE;
					color:#199FFE;
				}
				&.off{
					background-color: #F5F6FA;
					color:#838A99;
				}
			}
			
		}
		.time{
			display: flex;
			padding:20rpx 0;
			align-items: center;
			font-size:28rpx;color:#141311;
			.times{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.custom {
			        width: 36rpx;
			        height: 36rpx;
			        background-color: #FFE7E5;
			        border-radius: 4px;
			        justify-content: center;
			        align-items: center;
					text-align: center;
			        color: #FF4A40;
			        font-size: 22rpx;
					line-height: 36rpx;
					
			    }
			}
		}
	}
	.goods-box{
		padding:28rpx;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 20rpx;
		padding-bottom: 0;
		.title{
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			justify-content: space-between;
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#9BA2AB;
				font-weight: initial;
			}
		}
		
	}
	
	.it-box{
		background-color: #fff;
		border-radius: 20rpx;
		margin-top:20rpx;
		padding:22rpx 28rpx;
		
		.it{
			display: flex;line-height: 1;
			justify-content: space-between;
			padding:22rpx 0;
			position: relative;
			&:nth-child(1){
				border-bottom: 1rpx solid #EDEDED;
				margin-bottom: 10rpx;
				padding-bottom: 32rpx;
				.msg{
					font-size: 32rpx;
					font-weight: bold;
					
				}
			}
			.msg{
				font-size: 30rpx;
			}
			.val{
				font-size: 28rpx;
				color:#9A9A9A;
			}
			
		}
	}
	.btn-box{
		background-color: #fff;
		margin-top:20rpx;
		display: flex;
		height:104rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		justify-content: center;align-items: center;
		margin-bottom: 50rpx;
		&:before,&::after{
			display: none;
		}
		image{
			width:40rpx;
			height:40rpx;
			margin-right:14rpx;
		}
	}
	
	.user-box{
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top:20rpx;
		.tab{
			height:104rpx;
			position: relative;
			display: flex;text-align: center;
			background:linear-gradient(180deg,#FFDCD9,#FFFFFF);
			
			image{
				width:100%;
				height:104rpx;display: block;
				position: absolute;top:0;left:0;
				&.on{
					transform: scaleX(-1);
				}
			}
			.it{
				position: relative;z-index: 2;line-height: 1;padding-top:28rpx;
				flex:1;
				font-size:30rpx;font-weight: bold;
				color:#FF6860;
				&.on{
					color:#141311
				}
				&.on:after{
					width:42rpx;
					height:6rpx;
					background-color: #FF401A;
					content: '';
					display: flex;
					position:absolute;
					bottom:20rpx;
					left:50%;
					transform: translateX(-50%);
				}
			}
		}
		
	}
</style>
